<template>
  <svg :style="style" class="icon" :class="isHover ? '__hover' : ''">
    <use :xlink:href="`#icon-${name}`"></use>
  </svg>
</template>
<script setup lang="ts">
import { computed, type StyleValue } from 'vue'

const props = withDefaults(
  defineProps<{
    isHover?: boolean
    name: string
    fillColor?: Color
    fillHoverColor?: Color
    strokeColor?: Color
    strokeHoverColor?: Color
    size?: number
  }>(),
  {
    isHover: false,
    size: 20
  }
)

const style = computed(() => {
  return {
    width: `${props.size}px`,
    height: `${props.size}px`,
    '--svg-fill-color': props.isHover
      ? props.fillHoverColor
        ? props.fillHoverColor
        : 'var(--icon-fill-color)'
      : props.fillColor
        ? props.fillColor
        : 'var(--icon-fill-color)',
    '--svg-stroke-color': props.isHover
      ? props.strokeHoverColor
        ? props.strokeHoverColor
        : 'var(--icon-stroke-color)'
      : props.strokeColor
        ? props.strokeColor
        : 'var(--icon-stroke-color)'
  } as StyleValue
})
</script>
<style lang="scss">
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
